html {
  background-color: lightblue;
  // 小球尺寸
  $boxWidth: 10px;
  // 外包装尺寸
  $wrapperWidth: 150px;
  // 小球储量
  $n: 36;
  // 旋转角度
  $rotateDeg: 360deg / $n;
  .mainBox {
    position: relative;
    margin: 40px auto;
    width: $wrapperWidth;
    height: $wrapperWidth;
    border-radius: 50%;
    // border: 1px solid #fff;
    .circleBox {
      position: absolute;
      left: 50%;
      top: 0;
      perspective: 70px;
      transform-style: preserve-3d;
      margin-left: -$boxWidth / 2;
      margin-top: -$boxWidth / 2;
      width: $boxWidth;
      height: $boxWidth;
    //   background: red;
      transform-origin: center $wrapperWidth/2 + $boxWidth/2;
      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: $boxWidth;
        height: $boxWidth;
        border-radius: 50%;
      }
      &::before {
        top: -100%;
        background-color: #000;
        animation: blackMove 2s linear infinite;
        @keyframes blackMove {
            0% {
                transition-timing-function: ease-in;
            }
            25% {
                transform: translate3d(0, 100%, $boxWidth);
                transition-timing-function: ease-out;
            }
            50% {
                transform: translate3d(0, 200%, 0);
                transition-timing-function: ease-in;
            }
            75% {
                transform: translate3d(0, 100%, -$boxWidth);
                transition-timing-function: ease-out;
            }
        }
      }
      &::after {
        top: 100%;
        background-color: #fff;
        animation: whiteMove 2s linear infinite;
        @keyframes whiteMove {
            0% {
                transition-timing-function: ease-in;
            }
            25% {
                transform: translate3d(0, -100%, -$boxWidth);
                transition-timing-function: ease-out;
            }
            50% {
                transform: translate3d(0, -200%, 0);
                transition-timing-function: ease-in;
            }
            75% {
                transform: translate3d(0, -100%, $boxWidth);
                transition-timing-function: ease-out;
            }
        }
      }
      @for $i from 1 through $n {
        &:nth-child(#{$i}) {
          transform: rotate($rotateDeg * ($i - 1));
          &::before,
          &::after {
            animation-delay: -2s / $n * ($i - 1) * 6;
          }
        }
      }
    }
  }
}
